
<template>
  <Card>
    <el-descriptions
        class="margin-top"
        title="资产详情"
        :column="4"
        :size="size"
        :style="blockMargin"
        direction="vertical"
    >
      <template #extra>
        <template v-if="!isEditing">
          <el-button  type="primary" @click="toggleEditing">编辑</el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="toggleSave">保存</el-button>
        </template>
        <el-button
            type="primary"
            size="default"
            @click="showDeleteConfirm()"
        >删除</el-button>
      </template>
      <el-descriptions-item label="资产编号">
        <template v-if="!isEditing">{{ asset.assetNo }}</template>
        <template v-else>
          <el-input v-model="asset.assetNo" ></el-input>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="资产型号">
        <template v-if="!isEditing">{{ asset.assetTypeNo }}</template>
        <template v-else>
          <el-input v-model="asset.assetTypeNo"></el-input>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="资产名">
        <template v-if="!isEditing">{{ asset.assetName}}</template>
        <template v-else>
          <el-input v-model="asset.assetName"></el-input>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="资产标签">
        <template v-if="!isEditing">{{ asset.assetLabel}}</template>
        <template v-else>
          <el-input v-model="asset.assetLabel"></el-input>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="资产描述"  span="4"
      ><template v-if="!isEditing">{{ asset.assetDesc}}</template>
        <template v-else>
          <el-input v-model="asset.assetDesc" type="textarea" autosize></el-input>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="资产类别" span="2">
        <template v-if="!isEditing">{{asset.assetCategory}}</template>
        <template v-else>
          <el-input v-model="asset.assetCategory"></el-input>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="资产状态" span="2">
        <template v-if="!isEditing">{{asset.assetStatus}}</template>
        <template v-else>
          <el-input v-model="asset.assetStatus"></el-input>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="加入时间" span="2">
        {{asset.registerTime}}
      </el-descriptions-item>
      <el-descriptions-item label="最近更新时间" span="2">
        {{asset.lastUpdatedTime}}
      </el-descriptions-item>
      <el-descriptions-item label="资产所属组织">
        <template v-if="!isEditing">{{asset.belongOrgName}}</template>
        <template v-else>
          <el-select v-model="asset.belongOrg" placeholder="asset.belongOrgName">
            <el-option v-for="org in Orgs" :key="org.id" :label="org.orgName" :value="org.id" />
          </el-select>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="资产负责人">
        <template v-if="!isEditing">{{asset.assetUser}}</template>
        <template v-else>
          <el-input v-model="asset.assetUser"></el-input>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="资产网络ip">
        <template v-if="!isEditing">{{asset.ip}}</template>
        <template v-else>
          <el-input v-model="asset.ip"></el-input>
        </template></el-descriptions-item>
    </el-descriptions>
  </Card>
</template>
<style>
.ivu-card-body {
  margin: 10px auto;
  width: 1024px;
}


</style>
<script>
import {ElMessageBox} from "element-plus";
import {Delete} from "@element-plus/icons-vue";
import {markRaw} from "vue";

export default {
  name: 'Article',
  components: {

  },
  data() {
    return {
      asset: [{
        id : 0,
        assetNo: '',
        assetTypeNo: '',
        assetName: '',
        assetLabel:'',
        assetDesc:'',
        assetCategory:'',
        assetStatus:'',
        registerTime:'',
        lastUpdatedTime:'',
        belongOrg:0,
        belongOrgName:'',
        assetUser:'',
        ip:'',
      }
      ],
      Orgs:[
        {
          'id':0,
          'orgName':'',
          'fatherOrg':''
        }
      ],
      isEditing: false,

    }
  },
  created: function () {
    if ('id' in this.$route.params) {
      let id = this.$route.params.id
      console.log(this.$route.params.id)
      //获取文章
      this.$api.get('asset/getAsset/' + id).then((res) => {
        if (res.code === 1) {
          this.asset = res.data
          console.log(this.asset)
          this.$api.get('assetOrg/getByid/' + this.asset.belongOrg).then((res) => {
            this.asset.belongOrgName = res.data.orgName
          })
        }
        else
        {
          this.info(res.msg)
        }
      })
    }

  },
  methods: {
    info(text) {
      this.$Notice.info({
        title: '提示',
        desc: text
      });
    },
    showDeleteConfirm() {
      ElMessageBox.confirm('是否确认删除?', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning',
        icon: markRaw(Delete),
      }).then(() => {
        // 用户点击了确认按钮，调用删除逻辑
        this.deleteAsset();
      }).catch(() => {
        // 用户点击了取消按钮，可以在这里处理取消的逻辑
      });
    },
    //删除资产
    deleteAsset() {
      this.$api.delete('asset/delete/' + this.asset.id).then((res) => {
        if (res.code === 1){
          this.$Notice.info({
            title: '提示',
            desc: res.msg
          });
          this.$router.push({path: '/asset'})
        }
        else{
          this.$Notice.info({
            title: '提示',
            desc: res.msg
          });
        }

      })
    },
    //通过传递参数的不同进行点赞和踩的判断
    toggleEditing() {
      this.$api.get('assetOrg/getAll').then((res) => {
        console.log(res.data)
        this.Orgs = res.data
        console.log(this.Orgs)
      })
      this.isEditing = !this.isEditing;
    },
    toggleSave() {
      let data = {
        id : this.asset.id,
        assetNo: this.asset.assetNo,
        assetTypeNo: this.asset.assetTypeNo,
        assetName: this.asset.assetName,
        assetLabel: this.asset.assetLabel,
        assetDesc: this.asset.assetDesc,
        assetCategory: this.asset.assetCategory,
        assetStatus: this.asset.assetStatus,
        registerTime: this.asset.registerTime,
        lastUpdatedTime: this.asset.lastUpdatedTime,
        belongOrg: this.asset.belongOrg,
        assetUser: this.asset.assetUser,
        ip: this.asset.ip,
      }
      console.log("----------------------------------------")
      console.log(data)
      this.$api.post('asset/update', data).then((res) => {
        console.log(res.data)
        this.$Notice.info({
          title: '提示',
          desc: res.msg
        });
        if (res.code === 1) {
        }
      })
      this.isEditing = !this.isEditing;
    },
  },
}
</script>
